<template>
  <div class="intelligent-customer-service-page">
    <div class="page-header">
      <h1>智能客服助手</h1>
      <p>基于阿里云通义千问的智能客服系统</p>
    </div>

    <div class="page-content">
      <IntelligentCustomerService />
    </div>

    <div class="setup-guide">
      <el-card>
        <template #header>
          <h3>配置说明</h3>
        </template>
        
        <div class="guide-content">
          <h4>1. 环境变量配置</h4>
          <p>请创建 <code>.env.local</code> 文件并配置以下环境变量：</p>
          <pre><code># 阿里云通义千问API Key (必填)
            VITE_ALIYUN_API_KEY=your_api_key_here

            # 阿里云API基础URL (可选)
            VITE_ALIYUN_BASE_URL=https://dashscope.aliyuncs.com/api/v1

            # 通义千问Embedding模型 (可选，默认使用限时免费模型)
            VITE_ALIYUN_EMBEDDING_MODEL=text-embedding-v1

            # 通义千问对话模型 (可选，默认使用限时免费模型)
            VITE_ALIYUN_CHAT_MODEL=qwen-turbo</code></pre>

          <h4>2. 获取API Key</h4>
          <ol>
            <li>访问 <a href="https://dashscope.aliyun.com/" target="_blank">阿里云通义千问控制台</a></li>
            <li>注册/登录阿里云账号</li>
            <li>创建API Key</li>
            <li>将API Key填入环境变量</li>
          </ol>

          <h4>3. 限时免费模型</h4>
          <p>系统默认使用以下限时免费模型：</p>
          <ul>
            <li><strong>Embedding模型</strong>: text-embedding-v1 (免费额度：1000次/月)</li>
            <li><strong>对话模型</strong>: qwen-turbo (免费额度：1000次/月)</li>
          </ul>

          <h4>4. 功能特性</h4>
          <ul>
            <li>✅ 智能知识库管理</li>
            <li>✅ 向量化搜索</li>
            <li>✅ 智能客服对话</li>
            <li>✅ 实时连接状态检测</li>
            <li>✅ 知识库统计信息</li>
            <li>✅ 批量知识导入</li>
          </ul>

          <h4>5. 使用步骤</h4>
          <ol>
            <li>配置API Key后点击"测试连接"</li>
            <li>点击"知识库管理"添加相关知识</li>
            <li>开始与智能客服对话</li>
          </ol>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import IntelligentCustomerService from '../components/IntelligentCustomerService.vue'
</script>

<style scoped>
.intelligent-customer-service-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #303133;
  margin-bottom: 8px;
}

.page-header p {
  color: #909399;
  font-size: 16px;
}

.page-content {
  margin-bottom: 30px;
}

.setup-guide {
  margin-top: 40px;
}

.guide-content h4 {
  color: #303133;
  margin: 20px 0 10px 0;
  font-size: 16px;
}

.guide-content p {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 10px;
}

.guide-content ol, .guide-content ul {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 15px;
  padding-left: 20px;
}

.guide-content li {
  margin-bottom: 5px;
}

.guide-content code {
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  color: #e6a23c;
}

.guide-content pre {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 10px 0;
}

.guide-content pre code {
  background: none;
  padding: 0;
  color: #606266;
}

.guide-content a {
  color: #409eff;
  text-decoration: none;
}

.guide-content a:hover {
  text-decoration: underline;
}

.guide-content ul li {
  list-style-type: none;
  position: relative;
  padding-left: 20px;
}

.guide-content ul li:before {
  content: "✅";
  position: absolute;
  left: 0;
  color: #67c23a;
}
</style> 